<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="mainAo" style="width: 1100px;height: 500px"></div>
</template>
<script>
  import echarts from 'echarts'
export default {

  props: {

   AoXDate: {
      type: Array,
      required: true
    },
    depth:{
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: ''
    }
  },
  watch: {
    AoXDate(val) {
      this.setOptions(val)
    },
    depth(val){
      this.setOptions(val)
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted(){

     this.$nextTick(() => {
      this.init()
    })

  },
  methods: {
    async init() {
      this.chart = echarts.init(document.getElementById('mainAo'))
      this.setOptions(this.AoXDate,this. depth)
    },
    setOptions({ reportName, employeeX, employeeY } = {}) {
      this.chart.setOption({
        title:{
          text:'AO方向相对位移',
          x:'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'top',
          textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "Aolder","color": "#333"}

            fontSize: 24,

          },
        },
        tooltip: {              //设置tip提示
          trigger: 'axis',
          formatter:(param)=>{
            // 自定义 弹窗里面的 内容
            let  str = `<div>
                <span>孔深：</span>
                <span> ${param[0].axisValue}（m）</span>
                <br/>
                <span>AO方向相对位移：</span>
                <span> ${param[0].data}（m）</span>
                <br/>
<!--             <i style='font-size:10px' >提示：点击查看时间位移曲线</i>-->
             </div>`

            return str}
        },

        legend: {               //设置区分（哪条线属于什么）
          data:['AO方向相对位移'],
          x:'right',
          y:'top',
        },
        color: ['#8AE09F', '#FA6F53'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {                //设置x轴
          type: 'category',
          AoundaryGap: false,     //坐标轴两边不留白
          data:this.depth,
          name: '孔深（m）',           //X轴 name
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#FA6F53',
            }
          }
        },
        yAxis: {
          name: '位移（mm）',
          nameTextStyle: {
            color: '#FA6F53',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#FA6F53',
            }
          },
          type: 'value'
        },
        series: [
          {
            name: 'AO方向相对位移',
            data:  this.AoXDate,
            type: 'line',               // 类型为折线图
            lineStyle: {                // 线条样式 => 必须使用normal属性
              normal: {
                color: '#8AE09F',
              }
            },
          },

        ]
      })
    }
  }
}
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>

